<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
    <title>Expandable elements</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      #expand-btn {
        margin: 0 3px;
        display: inline-block;
        font: 12px / 13px 'Lucida Grande', sans-serif;
        text-shadow: rgba(255, 255, 255, 0.4) 0 1px;
        padding: 3px 6px;
        border: 1px solid rgba(0, 0, 0, 0.6);
        background-color: #969696;
        cursor: default;
        border-radius: 3px;
        box-shadow: rgba(255, 255, 255, 0.4) 0 1px,
          inset 0 20px 20px -10px white;
      }

      #isexpanded:checked ~ #expand-btn,
      #isexpanded:checked ~ * #expand-btn {
        background: #b5b5b5;
        box-shadow: inset rgba(0, 0, 0, 0.4) 0 -5px 12px,
          inset rgba(0, 0, 0, 1) 0 1px 3px, rgba(255, 255, 255, 0.4) 0 1px;
      }

      #isexpanded,
      .expandable {
        display: none;
      }

      #isexpanded:checked ~ * tr.expandable {
        display: table-row;
        background: #cccccc;
      }

      #isexpanded:checked ~ p.expandable,
      #isexpanded:checked ~ * p.expandable {
        display: block;
        background: #cccccc;
      }

      .bg {
        height: 50px;
        background-color: #369;
      }
      .bg2 {
        background-color: #396;
      }
      .bg3 {
        background-color: #639;
      }
      .bg4 {
        background-color: #693;
      }
      .bg5 {
        background-color: #936;
      }
      .bg6 {
        background-color: #963;
      }
      .art {
        background-image: url(./images/artistcustomizelist1.png);
        background-size: contain;
        width: 100px;
        height: 100px;
      }
      .art:hover {
        -ms-filter: brightness(120%);
        -webkit-filter: brightness(120%);
        -moz-filter: brightness(120%);
        -o-filter: brightness(120%);
        filter: brightness(120%);
      }
      .border {
        border: thin solid red;
        width: 300px;
        height: 100px;
        background-color: #999;
      }
      .border1 {
        border: 1px solid red;
        width: 300px;
        height: 100px;
        background-color: #999;
      }
    </style>
  </head>

  <body>
    <input type="checkbox" id="isexpanded" />
    <h1>Expandable elements</h1>
    <table>
      <thead>
        <tr>
          <th>Column #1</th>
          <th>Column #2</th>
          <th>Column #3</th>
        </tr>
      </thead>
      <tbody>
        <tr class="expandable">
          <td>[cell text]</td>
          <td>[cell text]</td>
          <td>[cell text]</td>
        </tr>
        <tr>
          <td>[cell text]</td>
          <td>[cell text]</td>
          <td>[cell text]</td>
        </tr>
        <tr>
          <td>[cell text]</td>
          <td>[cell text]</td>
          <td>[cell text]</td>
        </tr>
        <tr class="expandable">
          <td>[cell text]</td>
          <td>[cell text]</td>
          <td>[cell text]</td>
        </tr>
        <tr class="expandable">
          <td>[cell text]</td>
          <td>[cell text]</td>
          <td>[cell text]</td>
        </tr>
      </tbody>
    </table>
    <p>[some sample text]</p>
    <p>
      <label for="isexpanded" id="expand-btn">Show hidden elements</label>
    </p>
    <p class="expandable">[another sample text]</p>
    <p>[some sample text]</p>
    <div class="bg bg1"></div>
    <div class="bg bg2"></div>
    <div class="bg bg3"></div>
    <div class="bg bg4"></div>
    <div class="bg bg5"></div>
    <div class="bg bg6"></div>
    <div class="art"></div>
    <div class="border">borderthin</div>
    <div class="border1">border 1px</div>
  </body>
</html>
